<template>
  <div>
    <h1>{{ msg }}</h1>

    <div class="card">
      <button type="button" @click="increment">a is {{ a }}</button>
      <span>{{ publishedBooksMessage }}</span>
      <li v-for="(item, index) in items" :key="index">
        {{ item.message }}
      </li>
    </div>
  </div>
</template>
<script setup>
import { reactive, computed, ref } from "vue";
defineProps({
  msg: String,
});
const count = ref(0);
console.log(count.value);
const a = ref(1);
function increment() {
  a.value++;
}

const author = reactive({
  name: "John Doe",
  books: [
    "Vue 2 - Advanced Guide",
    "Vue 3 - Basic Guide",
    "Vue 4 - The Mystery",
  ],
});
//计算属性
const publishedBooksMessage = computed(() => {
  return author.books.length > 0 ? "YES" : NO;
});
const items = reactive([{ message: "Foo" }, { message: "Bar" }]);
</script>
<style scoped>
.read-the-docs {
  color: #888;
}
</style>
